<template>
  <el-select :id="name" size="small" v-model="valueModel" :placeholder="placeholder"
             :value="valueModel" @change="onChange" clearable multiple>
    <el-option v-if="selectAll" label="- 查询全部 -" value=""></el-option>
    <el-option v-for="option in opts" :key="option.value"
               :label="option.label" :value="option.value"></el-option>
  </el-select>
</template>

<script>
/* eslint-disable */
import {InputType} from "@/lang/fast-form";
import Layers from "@/lang/layers";

/**
 * 复选下拉框组件
 *
 * 支持数组类型的参数
 */
export default {
    name: "SmartMultipleSelect"
    , inject: ['fast_form']
    , props: {
        // 字段名
        name: {type: String}
        // 默认值
        , value: {type: [String], default: undefined}
        // 数据字典
        , options: {type: [Array, String], default: undefined}
        // 文字提示
        , placeholder: {type: String, default: ''}
        // 选中全部
        , selectAll: {type: Boolean, default: false}
    }
    , watch: {
        value: {
            handler: function (val) {
                this.input.setFormatValue(val);
            }
        }
        , options: {
            handler: function (val) {
                if (val !== undefined) {
                    AjaxProxy.loadDictionary(val).then(dic => this.opts = dic.list);
                }
            }
            , immediate: true
        }
    }
    , data() {
        return {
            // 值模型，用于计算的值，任何时候都不允许为空，避免 vue 联动失效
            valueModel: undefined
            // fast-form 表单接口
            , input: undefined
            // 数据字典
            , opts: undefined
        }
    }
    , created() {
        let input = this.fast_form.getFormInput(this.name);

        // 覆盖重写默认的函数
        input.wrap(InputType.CheckboxGroup);

        input.setDom(this);
        this.input = input;

        // 首次渲染数据 & 触发数据联动
        input.setFormatValue(this.value);
    }
    , methods: {
        /**
         * 用户输入变换事件
         * @param val
         */
        onChange: function (val) {
            this.input.changeValue(val);
        }
        /**
         * 数据受控函数，数据发生变化的时候，会通知到当前组件
         *
         * @see FastForm
         * @param val
         */
        , onChangeValue: function (val) {
            this.valueModel = val;
        }
        /**
         * 设值数据字典
         * @param val 字典
         */
        , setOptions(val) {
            if (Layers.isNotBlank(val)) {
                AjaxProxy.loadDictionary(val).then(dic => this.opts = dic.list);
            }
        }
    }
}
</script>
